<template>
  <el-form
    v-if="innerData"
    ref="innerData"
    v-model="innerData"
    v-loading="loading"
    label-width="100px"
  >
    <el-form-item label="人员" prop="userName">
      <UserSelector :code.sync="innerData.userName" select-name="人员党团信息编辑" />
    </el-form-item>
    <el-form-item label="政治面貌" prop="typeInParty">
      <TypeInPartySelector v-model="innerData.typeInParty" :value-range="[0,999]" />
    </el-form-item>
    <el-form-item label="入党时间" prop="time_Party">
      <el-date-picker
        v-model="innerData.time_Party"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item label="党团组织" prop="partyGroup">
      <PartyGroupSelector
        v-model="innerData.partyGroup"
        :company.sync="innerData.company"
        :default-select-first-group="true"
      />
    </el-form-item>
    <el-form-item label="党内分工" prop="duty">
      <PartyDutySelector v-model="innerData.duty" :multi="true" :value-range="[0,999]" />
    </el-form-item>
    <el-form-item
      v-if="innerData.duty && innerData.duty.find(i=>i>0)"
      label="起任时间"
      prop="dutyStart"
    >
      <el-date-picker
        v-model="innerData.dutyStart"
        value-format="yyyy-MM-dd"
        type="date"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">立即提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { updatePartyUser } from '@/api/zzxt/party-userinfo'
export default {
  name: 'Form',
  components: {
    UserSelector: () => import('@/components/User/UserSelector'),
    PartyGroupSelector: () =>
      import('@/components/Party/PartyGroup/PartyGroupSelector'),
    TypeInPartySelector: () =>
      import('@/components/Party/TypeInParty/TypeInPartySelector'),
    PartyDutySelector: () =>
      import('@/components/Party/PartyDuty/PartyDutySelector')
  },
  props: {
    data: { type: Object, default: null }
  },
  data: () => ({
    inner_data: null,
    loading: false
  }),
  computed: {
    innerData: {
      get() {
        return this.inner_data
      },
      set(val) {
        this.inner_data = val
        this.$emit('update:data', val)
      }
    },
    partyDutiesArray() {
      return this.$store.state.party.partyDuties
    }
  },
  watch: {
    data: {
      handler(val) {
        this.inner_data = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submitForm() {
      this.loading = true
      const payload = this.innerData
      payload.allowOverwrite = !!payload.id
      updatePartyUser(payload)
        .then(data => {
          this.$message.success('已提交')
          this.resetForm()
          this.$emit('requireRefresh')
        })
        .finally(() => {
          this.loading = false
        })
    },
    resetForm() {
      this.innerData = {}
    }
  }
}
</script>
